<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="事件1" v-on:click="show()">
        <input type="button" value="事件2" v-on:click="show">
        <input type="button" value="事件3" v-on:click="show(this)">
        <input type="button" value="事件4" @click="show()">
        <hr>
        <input type="text" @focus="fun1()" @blur="fun2()">
        <input type="text" v-on="{blur:fun1,focus:fun2}">
        <input type="text" v-on="obj">
        <input type="button" value="绑定相同事件" @click="fun1()" @click="fun2()">
        <input type="button" value="绑定相同事件" @click="fun1(),fun2()">
        <input type="button" value="绑定相同事件" @click="[fun1(),fun2()]">
        <hr>
        <input type="button" value="可以传递的形参数据" @click="printArg(123,true,'字符串',{name:'iboy'},[1,2,3])">
        <input type="button" value="可以传递的形参数据" @click="printArg(1+1,true&&false,Math.random(),true?'是':'否','字符串'+'哈哈哈')">
        <input type="button" value="可以传递的形参数据" @click="printArg(msg,num)">
        <input type="button" value="可以传递的形参数据" @click="printMsg()">
        <hr>
        <input type="button" value="获取当前DOM对象元素" @click="getDom($event)">
        <input type="button" value="获取当前DOM元素的value值" @click="getValue($event.target.value)">
        <hr>
        <h2 v-show="flag">现在是标题1</h2>
        <h2 v-show="!flag">现在是标题2</h2>
        <input type="button" value="切换" @click="flag=!flag">
        <button type="button"  @click="change()">切换</button>
        <p>str:{{str}}</p>
        <input type="button" value="随机为str增加随机值" @click="str=Math.random()">
        <input type="button" value="随机为str增加随机值" @click="str=Math.PI">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                a:100,
                obj:{
                    blur:function(){
                        console.log("fun1");
                    },
                    focus:function(){
                        console.log("fun2");
                    }
                },
                msg:"字符串",
                num:123,
                flag:true,
                str:""
            },
            methods:{
                show:function(){
                    console.log("哈哈哈");
                },
                // show:()=>{
                //     // console.log("点击事件");
                // }
                fun1(){
                    console.log("fun1");
                },
                fun2(){
                    console.log("fun2")
                },
                printArg(arg1,arg2,arg3,arg4,arg5){
                    console.log(arg1,arg2,arg3,arg4,arg5);
                },
                printMsg(){
                    console.log(this);
                    console.log(this.msg);
                    console.log(this.num);
                },
                getDom(e){
                    console.log(e);
                    console.log(e.target);
                    console.log(e.target.value);
                },
                getValue(e){
                    console.log(e);
                },
                change(){
                    this.flag=!this.flag;
                }
            }
        })
    </script>
</body>
</html>